<template>
  <div class="print-wrapper">
    <div id="print-box" ref="print">
      
      <!-- <ul class="d-flex align-items-center print-header"></ul> -->
      <div class="title">山东卅丰&nbsp;&nbsp;&nbsp;&nbsp;出库单</div>
      <div class="d-flex justify-content-between" style="line-height: 30px;">
        <span style="width: 66.666%">打印时间：2019-09-09 14:27:00</span>
        <span style="width: 33.333%">SX-2019-09-09-00103</span>
      </div>
      <ul class="d-flex align-items-center print-header">
        <li>
          客户：山东金鸿宇
        </li>
        <li>
          录单日期：2019-09-09
        </li>
        <li>
          结算方式：
        </li>
        <li>
          电话：18366170580
        </li>
        <li>
          摘要：【SD-2019-09-09-00110】
        </li>
        <li>
          项目：其他
        </li>
      </ul>
      <table class="table table-borderless b-table">
        <tbody>
          <tr style="border-bottom: 1px solid #333;">
            <td style="padding: 0;" colspan="7">
              <!-- <div class="myline"></div> -->
            </td>
          </tr>
          <tr>
            <td>存货编号</td>
            <td>存货全名</td>
            <td>单位</td>
            <td>数量</td>
            <td>单价</td>
            <td>金额</td>
            <td>备注</td>
          </tr>
          <tr>
            <td>XK0002</td>
            <td>HP 显卡 GT710 1G</td>
            <td>快</td>
            <td>5</td>
            <td>200</td>
            <td>1,000.00</td>
            <td>SD-2019-09-09-00110</td>
          </tr>
          <tr>
            <td>XK0002</td>
            <td>HP 显卡 GT710 1G</td>
            <td>快</td>
            <td>5</td>
            <td>200</td>
            <td>1,000.00</td>
            <td>SD-2019-09-09-00110</td>
          </tr>
          <tr>
            <td>XK0002</td>
            <td>HP 显卡 GT710 1G</td>
            <td>快</td>
            <td>5</td>
            <td>200</td>
            <td>1,000.00</td>
            <td>SD-2019-09-09-00110</td>
          </tr>
          <tr>
            <td>XK0002</td>
            <td>HP 显卡 GT710 1G</td>
            <td>快</td>
            <td>5</td>
            <td>200</td>
            <td>1,000.00</td>
            <td>SD-2019-09-09-00110</td>
          </tr>
          <tr>
            <td>XK0002</td>
            <td>HP 显卡 GT710 1G</td>
            <td>快</td>
            <td>5</td>
            <td>200</td>
            <td>1,000.00</td>
            <td>SD-2019-09-09-00110</td>
          </tr>
          <tr>
            <td>XK0002</td>
            <td>HP 显卡 GT710 1G</td>
            <td>快</td>
            <td>5</td>
            <td>200</td>
            <td>1,000.00</td>
            <td>SD-2019-09-09-00110</td>
          </tr>
          <tr style="border-bottom: 1px solid #333;">
            <td style="padding: 0;" colspan="7">
              <!-- <div class="myline"></div> -->
            </td>
          </tr>
          <tr class="footer-tr">
            <td>合计：</td>
            <td></td>
            <td></td>
            <td>6</td>
            <td></td>
            <td>6000</td>
            <td></td>
          </tr>
          <tr class="footer-tr">
            <td>制单人：xxx</td>
            <td>业务员：</td>
            <td>库管：</td>
            <td></td>
            <td>收货人：</td>
            <td></td>
            <td>欠款人：</td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-button @click="print">打印</el-button>
  </div>
</template>

<script>
export default {
  name:'Print',
  data() {
    return {
      someJSONdata: [
        
      ]
    }
  },
  mounted(){
    console.log(process.env.NODE_ENV)
  },
  methods: {
    print(){
      // let subOutputRankPrint = document.getElementById('print-box');
      // let newContent = subOutputRankPrint.innerHTML;
      // let oldContent = document.body.innerHTML;
      // document.body.innerHTML = newContent;
      // window.print();
      // window.location.reload();
      // document.body.innerHTML = oldContent;
      // return false;

      this.$print(this.$refs.print)

      // printJS('http://fupinapi.xiaoxichangliu.net/UploadFiles/AnotherFile/DangAn/table.pdf')
    }
  }
}
</script>

<style scoped lang="less">
  .title{
    padding-right: 10%;
    text-align: center;
    // font-weight: 700;
    font-size: 30px;
  }
  #print-box{
    // width: 80%;
    padding: 20px;
    box-sizing: border-box;
    height: auto;
  }
  .print-header{
    padding: 0;
    padding-bottom: 8px;
    margin-bottom: 8px;
    // border-bottom: 1px solid #333;
    margin: 0;
    flex-wrap: wrap;
    li{
      width: 33.333%;
      line-height: 30px;
      // text-align: center;
    }
    /* li:first-child{
      text-align: left;
    }
    li:nth-child(3n+1){
      text-align: left
    }
    li:nth-child(3n){
      text-align: right;
    } */
  }
  .myline{
    width: 100%;
    height: 1px;
    background-color: #333;
  }
  .b-table{
    tr{
      text-align: center;
      td{
        padding: .5rem;
      }
    }
  }
</style>